<!-- 商铺页面 -->
<template>
  <div class="content4">
   <div class="c4left"></div>

   <div class="c4right">
     <!-- 设备数量echarts -->
     <div id="c4e1">1</div>
     <!-- 每栋数量展示 -->
     <div id="c4e2">2</div>
   </div>
  </div>
</template>

<script>
import { child4Echart1, child4Echart2} from '@/common/echartsdata.js';
  export default {
    name: 'childdev',
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {
      this.load4Echarts();
    },
    components:{

    },
    methods: {
    //加载echarts
    load4Echarts() {
      child4Echart1();
      child4Echart2();
    }
    },
    computed: {

    },
    watch: {

    }
  }
</script>

<style lang="less" scoped>
  .content4{
    width: 100%;
    height: (100%-@htop);
    position: absolute;
    top: @htop;
    z-index: 9;
    // background: rgba(0,0,0,.3);
    pointer-events: none;
    //左侧
    .c4left {
      height: 97%;
      padding: 10px;
      margin-left: 30px;
      float: left;
      color: #fff;
      display: flex;
      flex-direction: column;
      width: 350px;
      background: url(~assets/icon/echartsbg1.png) no-repeat;
      background-size: 100% 100%;
      pointer-events: auto;
    }

    //右侧
    .c4right {
      // background-color: skyblue;
      display: flex;
      flex-direction: column;
      float: right;
      margin-right: 30px;
      pointer-events: auto;
      #c4e1,
      #c4e2,
      #c4e3 {
        width: 280px;
        min-height: 220px;
        height: 30%;
        background: url('~assets/icon/echartsbg.png') no-repeat;
        // background-image: url(../../assets/icon/echartsbg.png);
        background-size: 100% 100%;
        padding: 20px 10px;
      }
    }
  }
</style>
